import { Card, Row, Col, Statistic, Typography, Table, Tag, Space } from 'antd';
import {
  BarChartOutlined,
  FileTextOutlined,
  TeamOutlined,
  ShoppingOutlined,
  RiseOutlined,
  FallOutlined,
  EyeOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';

const { Text } = Typography;

// 模拟数据
const mockData = {
  statistics: {
    totalArticles: 156,
    totalProducts: 89,
    totalUsers: 2345,
    totalViews: 45678,
  },
  recentArticles: [
    {
      id: 1,
      title: '松茸的识别方法与采摘技巧',
      author: '张专家',
      category: 'edible',
      views: 1234,
      createTime: '2024-03-20',
    },
    {
      id: 2,
      title: '野生菌中毒预防指南',
      author: '李医生',
      category: 'poisonous',
      views: 2345,
      createTime: '2024-03-19',
    },
    {
      id: 3,
      title: '羊肚菌的药用价值研究',
      author: '王研究员',
      category: 'medicinal',
      views: 1567,
      createTime: '2024-03-18',
    },
  ],
  categoryData: [
    { name: '食用菌', value: 45 },
    { name: '药用菌', value: 30 },
    { name: '有毒菌', value: 14 },
  ],
  monthlyData: {
    months: ['1月', '2月', '3月', '4月', '5月', '6月'],
    articles: [10, 15, 20, 25, 30, 35],
    views: [1000, 1500, 2000, 2800, 3500, 4000],
  },
};

const HomeContent = () => {
  // Remove unused activeTimeRange state

  // 分类统计图表配置
  const categoryChartOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: mockData.categoryData.map((item) => item.name),
    },
    series: [
      {
        name: '野生菌分类',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: mockData.categoryData.map((item) => ({
          value: item.value,
          name: item.name,
        })),
      },
    ],
  };

  // 趋势图表配置
  const trendChartOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      data: ['文章数量', '浏览量'],
      top: 0,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: mockData.monthlyData.months,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '文章数量',
        position: 'left',
      },
      {
        type: 'value',
        name: '浏览量',
        position: 'right',
      },
    ],
    series: [
      {
        name: '文章数量',
        type: 'bar',
        data: mockData.monthlyData.articles,
        itemStyle: {
          color: '#1890ff',
        },
      },
      {
        name: '浏览量',
        type: 'line',
        yAxisIndex: 1,
        data: mockData.monthlyData.views,
        smooth: true,
        itemStyle: {
          color: '#52c41a',
        },
      },
    ],
  };

  // 表格列配置
  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: '作者',
      dataIndex: 'author',
      key: 'author',
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
      render: (category: string) => (
        <Tag color={category === 'poisonous' ? 'red' : category === 'medicinal' ? 'blue' : 'green'}>
          {category === 'poisonous' ? '有毒' : category === 'medicinal' ? '药用' : '食用'}
        </Tag>
      ),
    },
    {
      title: '浏览量',
      dataIndex: 'views',
      key: 'views',
      render: (views: number) => (
        <Space>
          <EyeOutlined /> {views}
        </Space>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
  ];

  return (
    <div className="p-6">
      {/* 统计卡片 */}
      <Row gutter={[16, 16]}>
        <Col
          xs={24}
          sm={12}
          lg={6}
        >
          <Card hoverable>
            <Statistic
              title="文章总数"
              value={mockData.statistics.totalArticles}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
            <div className="mt-2">
              <Text type="secondary">
                <RiseOutlined /> 较上月增长 12%
              </Text>
            </div>
          </Card>
        </Col>
        <Col
          xs={24}
          sm={12}
          lg={6}
        >
          <Card hoverable>
            <Statistic
              title="产品数量"
              value={mockData.statistics.totalProducts}
              prefix={<ShoppingOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
            <div className="mt-2">
              <Text type="secondary">
                <RiseOutlined /> 较上月增长 8%
              </Text>
            </div>
          </Card>
        </Col>
        <Col
          xs={24}
          sm={12}
          lg={6}
        >
          <Card hoverable>
            <Statistic
              title="用户数量"
              value={mockData.statistics.totalUsers}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
            <div className="mt-2">
              <Text type="secondary">
                <RiseOutlined /> 较上月增长 15%
              </Text>
            </div>
          </Card>
        </Col>
        <Col
          xs={24}
          sm={12}
          lg={6}
        >
          <Card hoverable>
            <Statistic
              title="总浏览量"
              value={mockData.statistics.totalViews}
              prefix={<BarChartOutlined />}
              valueStyle={{ color: '#eb2f96' }}
            />
            <div className="mt-2">
              <Text type="secondary">
                <FallOutlined /> 较上月下降 3%
              </Text>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      <Row
        gutter={[16, 16]}
        className="mt-6"
      >
        <Col
          xs={24}
          lg={16}
        >
          <Card
            title={
              <Space>
                <BarChartOutlined />
                <span>数据趋势</span>
              </Space>
            }
            className="h-[400px]"
          >
            <ReactECharts
              option={trendChartOption}
              style={{ height: '320px' }}
            />
          </Card>
        </Col>
        <Col
          xs={24}
          lg={8}
        >
          <Card
            title={
              <Space>
                <PieChartOutlined />
                <span>分类统计</span>
              </Space>
            }
            className="h-[400px]"
          >
            <ReactECharts
              option={categoryChartOption}
              style={{ height: '320px' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 最新文章列表 */}
      <Card
        title={
          <Space>
            <FileTextOutlined />
            <span>最新文章</span>
          </Space>
        }
        className="mt-6"
      >
        <Table
          columns={columns}
          dataSource={mockData.recentArticles}
          pagination={false}
        />
      </Card>
    </div>
  );
};

export default HomeContent;
